<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import { BoxLockStatus, DoorStatus, BoxStatus } from '@/types/enum'
import NullImg from '@/assets/main/null.png'
import BatteryState from '@/components/basic/BatteryState.vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { openDoor } from '@/api/cabinet'
import { getToken } from '@/utils/cache/cookies'
import { useRouter } from 'vue-router'
import { queryBoxDetail } from '@/api/cabinet'
import { queryBoxBoxDetailResponseData } from '@/api/cabinet/types/cabinet'
import CustomActiveButton from '@/components/basic/ui-elements/CustomActiveButton.vue'
import CustomActiveButtonGroup from '@/components/basic/ui-elements/CustomActiveButtonGroup.vue'
/** 控制开关 */
const dialogVisible = ref<boolean>(false)
const open = async () => {
  dialogVisible.value = true
  if (boxId.value !== prevboxId.value) {
    prevboxId.value = boxId.value
  }
}
const setId = (newId: number) => {
  boxId.value = newId
}
defineExpose({ open, setId })
/**  */
const data = ref<queryBoxBoxDetailResponseData | null>(null)
const boxId = ref<number>(0)
const prevboxId = ref<number | null>(null)
/** 过滤器 */
const changeBoxLockStatus = computed(() => {
  return (status: BoxLockStatus) => {
    switch (status) {
      case BoxLockStatus.Close:
        return '已关'
      case BoxLockStatus.Open:
        return '已开'
      default:
        break
    }
  }
})
const changeDoorStatus = computed(() => {
  return (status: DoorStatus) => {
    switch (status) {
      case DoorStatus.Close:
        return '已关'
      case DoorStatus.Open:
        return '已开'
      default:
        break
    }
  }
})
const changeBoxStatus = computed(() => {
  return (status: BoxStatus) => {
    switch (status) {
      case BoxStatus.Lose:
        return '断网'
      case BoxStatus.Connect:
        return '联网'
      default:
        break
    }
  }
})
/** 表单 */
const openDoorForm = reactive({
  doorId: '',
  reason: ''
})
const openDoorFormRef = ref<FormInstance | null>(null)

const rule = reactive<FormRules>({
  doorId: [{ required: true, message: '请输入要开启的仓门号' }],
  reason: [{ required: true, message: '请输入开启仓门原因' }]
})
/**  */
const router = useRouter()
const cabinetLocation = () => {
  if (
    data?.value?.longtitude == '0' ||
    data?.value?.longtitude == '' ||
    data?.value?.longtitude == null
  ) {
    ElMessage.error('该电柜暂无定位')
    return
  }
  dialogVisible.value = false
  router.push({
    name: 'CabinetLocation',
    query: {
      longtitude: data.value.longtitude,
      latitude: data.value.latitude,
      boxId: data.value.boxId
    }
  })
}
const handleOpenDoor = () => {
  openDoorFormRef.value?.validate((valid) => {
    if (valid) {
      openDoor({
        ...openDoorForm,
        boxId: data.value?.boxId ? data.value?.boxId : 0,
        token: getToken() ?? ''
      }).then((res) => {
        if (res.statusCode === '0') {
          ElMessage.success(res.data)
        } else {
          ElMessage.error(res.data)
        }
      })
    }
  })
}
const loading = ref<boolean>(false)
const getData = async () => {
  try {
    loading.value = true
    const res = await queryBoxDetail({
      boxId: boxId.value,
      token: getToken() ?? ''
    })
    data.value = res.data
    loading.value = false
  } catch (error) {
    console.error(error)
    loading.value = false
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="电柜信息"
    width="900"
    class="cabinet-info_dialog"
    @open="getData"
  >
    <div flex flex-col v-loading="loading">
      <div class="dialog-top">
        <span
          >电柜锁状态&nbsp;:&nbsp;<span style="color: #23b5af">{{
            data?.boxLockStatus ? changeBoxLockStatus(data?.boxLockStatus) : ''
          }}</span></span
        >
      </div>
      <div class="dialog-body" flex items-center justify-between>
        <div class="dialog-left door-list">
          <div
            v-for="(item, index) in data?.doorDataList"
            :key="item.doorNumber ? item.doorNumber : index"
            :class="[
              item.batteryId !== ''
                ? 'flex flex-col justify-end'
                : 'flex flex-col items-center justify-center ',
              'door-list_item'
            ]"
          >
            <div
              v-if="index != 0"
              :class="[
                'door-status',
                item.faultStatus == '1' ? 'fault' : item.statusChanging == '1' ? 'using' : 'free'
              ]"
            >
              <span v-if="item.faultStatus == '1'">维修</span>
              <span v-else-if="item.statusChanging == '1'">使用中...</span>
              <span v-else>空闲</span>
              <span v-if="item.doorStatus"
                >(<span
                  :style="{ color: item.doorStatus == '0' ? 'var(--xy-white-color)' : '#FFF136' }"
                  >{{ changeDoorStatus(item.doorStatus) }}</span
                >)</span
              >
            </div>
            <div v-else class="door-status door-one">
              <span v-if="item.doorStatus">仓门({{ changeDoorStatus(item.doorStatus) }})</span>
            </div>
            <span v-if="index == 0" class="doorId">
              <span style="font-size: 14px">(主控)</span>{{ index + 1 }}
            </span>
            <span v-else class="doorId">
              {{ index + 1 }}
            </span>
            <div v-if="item.batteryId != ''" flex flex-col items-center justify-end>
              <battery-state
                :power="item.batteryPowerLevel ? Number(item.batteryPowerLevel) : 0"
                :inputVoltage="item.inputVoltage ? item.inputVoltage : ''"
              />
              <span class="battery-id" v-if="item.batteryId != '1'">编号:{{ item.batteryId }}</span>
              <span class="battery-id" v-else>&nbsp;</span>
            </div>
            <div v-else flex flex-col items-center>
              <img :src="NullImg" alt="" />
              <span class="free-door">空仓</span>
            </div>
          </div>
        </div>
        <div class="dialog-right">
          <div class="cabinet-store_info">
            <span class="store-info_name">{{ data?.storeName }}</span>
            <span class="store-info_location">{{ data?.storeAddress }}</span>
            <span class="store-info_businesshours">营业时间:&nbsp;{{ data?.serviceTime }}</span>
            <div class="store-info_context">
              <span
                >联系人:&nbsp;<span>{{ data?.contactPerson }}</span></span
              >
              <span
                >电话:&nbsp;<span>{{ data?.contactPhone }}</span></span
              >
            </div>
          </div>
          <div class="cabinet_info">
            <div flex items-center>
              <span class="cabient-info_name">电柜名称:&nbsp;&nbsp;{{ data?.boxName }}</span>
              <div class="box-online-status">
                {{ data?.boxOnlineStatus ? changeBoxStatus(data?.boxOnlineStatus) : '' }}
              </div>
            </div>
            <span class="cabinet-info_cabinetId"
              >电柜编号&nbsp;:&nbsp;&nbsp;{{ data?.boxCode }}</span
            >
            <div flex justify-between>
              <span class="cabinet-info_boxLockId"
                >中控编号&nbsp;:&nbsp;&nbsp;{{ data?.boxLockId }}</span
              >
              <span class="cabinet-info_cameraId"
                >监控条码编号&nbsp;:&nbsp;&nbsp;{{ data?.cameraId }}</span
              >
            </div>
            <div flex justify-between class="cabient-info_location">
              <span>电柜位置&nbsp;:&nbsp;&nbsp;{{ data?.address }}&nbsp;&nbsp;</span>
              <span class="seeLocation" @click="cabinetLocation">查看位置</span>
            </div>
            <span class="cabinet-info_chargeInfoTitle">电池充电情况&nbsp;:</span>
            <div class="cabinet-info_chargeDetails">
              <div class="chargeDetails-title">
                <span>{{
                  data?.battery48VCount && data?.battery60VCount
                    ? data?.battery48VCount + data?.battery60VCount
                    : ''
                }}</span>
                <span>可换电池</span>
              </div>
              <div class="chargeDetails-info">
                <div>
                  60V
                  <span style="margin-left: 20px"
                    >可用
                    <span style="color: #efa14e">&nbsp;{{ data?.battery60VCount }}&nbsp;</span
                    >块</span
                  >
                  <!-- <span style="margin-left:20px">充电中
                <span style="color:#EFA14E">&nbsp;{{data.cabinetInfo.chargeInfo.sixtyV.incharge}}&nbsp;</span>块
              </span> -->
                </div>
                <div>
                  48V
                  <span style="margin-left: 20px"
                    >可用
                    <span style="color: #efa14e">&nbsp;{{ data?.battery48VCount }}&nbsp;</span
                    >块</span
                  >
                  <!-- <span style="margin-left:20px">充电中
                <span style="color:#EFA14E">&nbsp;{{data.cabinetInfo.chargeInfo.fourtyV.incharge}}&nbsp;</span>块
              </span> -->
                </div>
              </div>
            </div>
          </div>
          <div class="cabinet_tip">
            提示：如遇到换电人员电池被吞(电池放入后新电池未弹出),可通过此处帮助换电人员打开原电池仓门,或打开满电电池仓门。
          </div>
          <div class="cabinet-open-door_form">
            <el-form :model="openDoorForm" :rules="rule" ref="openDoorFormRef">
              <el-form-item prop="doorId">
                <custom-active-button-group v-model="openDoorForm.doorId">
                  <custom-active-button
                    class="door-button"
                    v-for="item in 9"
                    :key="item"
                    :active-value="(item + 1).toString()"
                    inactive-value=""
                    >{{ item + 1 }}</custom-active-button
                  >
                </custom-active-button-group>
              </el-form-item>
              <el-form-item prop="reason">
                <el-input v-model="openDoorForm.reason" placeholder="请输入开启仓门原因" />
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="handleOpenDoor">开启仓门</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped></style>
